<template>
  <div class="imgnews">
    <div v-for="(item, index) in item.data" :key="'imgnews_index_' + index">
      <div
        class="imgnews_panel"
        :class="
          $Plugins.isArray(item.content.img)
            ? 'imglist'
            : item.content.aside.isMaxImg
            ? 'maximg'
            : ''
        "
      >
        <div class="imgnews_panel_left">
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
          >
            <div class="imgnews_panel_left_content">
              {{ item.content.text }}
            </div>
          </a>
          <div class="imgnews_panel_left_aside">
            <div class="imgnews_panel_left_aside_soure">
              <a :href="'pages/group-div?id=' + item.group.groupId">{{
                item.group.title
              }}</a>
            </div>
            <div class="imgnews_panel_left_aside_left">
              <a
                :href="
                  'pages/comment-div?id=' +
                    item.group.groupId +
                    '&contentId=' +
                    item.content.contentId +
                    '&commentId=' +
                    item.content.aside.comment.commentId
                "
                v-if="!item.content.aside.isComment"
              >
                {{ $t("lang.评论")
                }}{{ fixNumber(item.content.aside.comment.commentCount) }}
              </a>
            </div>
            <div class="imgnews_panel_left_aside_right">
              {{ fixTime(item.content.aside.time) }}
            </div>
          </div>
        </div>
        <div class="imgnews_panel_right">
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
            v-if="$Plugins.isArray(item.content.img)"
            style="width:100%;display:flex"
          >
            <div
              class="imgnews_panel_right_img"
              v-for="(img, gindex) in item.content.img"
              :key="'itemContentImg_' + gindex"
            >
              <img
                :style="{
                  width: '100%',
                  height: 80 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                :src="img"
                v-lazy="img"
              />
            </div>
          </a>
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
            v-else
          >
            <div
              class="imgnews_panel_right_img"
              v-if="item.content.aside.isMaxImg"
            >
              <img
                :style="{
                  width: '100%',
                  height: 180 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                :src="item.content.img"
                v-lazy="item.content.img"
              />
            </div>
            <div class="imgnews_panel_right_img" v-else>
              <img
                :style="{
                  width: '100%',
                  height: 80 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                :src="item.content.img"
                v-lazy="item.content.img"
              />
            </div>
          </a>
        </div>
      </div>
      <div class="imgnews_panel_tools" v-if="item.content.aside.isComment">
        <div class="imgnews_panel_tools_left">
          <Button :item="item.aside.share">
            <template v-slot:icon>
              <van-icon name="share-o" />
            </template>
          </Button>
          <Button :item="item.aside.comment">
            <template v-slot:icon>
              <van-icon name="chat-o" />
            </template>
            <template v-slot:text>
              {{ fixNumber(item.content.aside.comment.commentCount) }}
            </template>
          </Button>
          <Button :item="item.aside.good">
            <template v-slot:icon>
              <van-icon name="good-job-o" />
            </template>
            <template v-slot:text>
              {{ fixNumber(item.content.aside.support.supportCount) }}
            </template>
          </Button>
        </div>
        <div class="imgnews_panel_tools_right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "imgnews",
  components: {
    Button: () =>
      import(/* webpackChunkName:'button' */ "../../components/button/button"),
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      toolsText: [
        this.$t("lang.分享"),
        this.$t("lang.评论"),
        this.$t("lang.点赞"),
      ],
    };
  },
  methods: {
    fixTime(t) {
      return this.$Plugins.timeago(new Date(t).getTime());
    },
    fixNumber(t) {
      return this.$Plugins.fixNumber(t, 100);
    },
  },
};
</script>

<style lang="less">
@percentage: 1%;
@base: 23.44rem;
.imgnews {
  padding: 0 (10 / @base);
  .imgnews_panel {
    display: flex;
    padding: (5 / @base) 0;
    &.imglist {
      display: block;
      .imgnews_panel_left {
        width: 100%;
        .imgnews_panel_left_content {
          min-height: auto;
        }
        .imgnews_panel_left_aside {
          padding: (10 / @base) 0;
        }
      }
      .imgnews_panel_right {
        width: 100%;
        margin: 0;
        a {
          display: flex;
        }
        .imgnews_panel_right_img {
          width: (100/3 / @percentage);
          margin: 0 (5 / @base);
          &:first-child {
            margin: 0;
          }
          &:last-child {
            margin: 0;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    &.maximg {
      display: block;
      .imgnews_panel_left {
        width: 100%;
        .imgnews_panel_left_content {
          min-height: auto;
        }
        .imgnews_panel_left_aside {
          padding: (10 / @base) 0;
        }
      }
      .imgnews_panel_right {
        width: 100%;
        margin: 0;
        a {
          display: flex;
        }
        .imgnews_panel_right_img {
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .imgnews_panel_left {
      text-align: left;
      width: 60%;
      .imgnews_panel_left_content {
        font-size: (14 / @base);
        min-height: (65 / @base);
      }
      .imgnews_panel_left_aside {
        font-size: (10 / @base);
        color: #999999;
        display: flex;
        .imgnews_panel_left_aside_soure {
          margin: 0 (5 / @base) 0 0;
        }
        .imgnews_panel_left_aside_left {
          a {
            margin: 0 (5 / @base) 0 0;
            display: block;
          }
        }
        .imgnews_panel_left_aside_right {
        }
      }
    }
    .imgnews_panel_right {
      margin: 0 0 0 (5 / @base);
      width: 40%;
    }
  }
  .imgnews_panel_tools {
    display: flex;
    padding: (10 / @base) 0 0;
    .imgnews_panel_tools_left {
      width: 70%;
      display: flex;
      .custom_button {
        &:first-child {
          margin-left: 0;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .imgnews_panel_tools_right {
      width: 30%;
    }
  }
}
</style>
